import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import { version } from '@site/src/version';

# Dora 启动！

## 1. Dora SSR 是什么？

![Dora SSR Intro](@site/static/img/article/detail-zh.svg)

:::info 引擎简介
&emsp;&emsp;Dora SSR 是一个用于多种设备上快速开发游戏的游戏引擎。它内置易用的 Web IDE 开发工具链，支持在手机、开源掌机等设备上直接进行游戏开发。
:::

## 2. 安装

<Tabs groupId="platform-select">
<TabItem value="android" label="Android">

1. 在游戏的运行终端下载并安装 APK 包。

	<Dropdown
		label="下载 APK"
		items={[
			{ label: 'GitHub', to: 'https://github.com/ippclub/Dora-SSR/releases/latest', target: '_blank' },
			{ label: 'Gitee', to: 'https://gitee.com/ippclub/Dora-SSR/releases/latest', target: '_blank' },
			{ label: 'GitCode', to: 'https://gitcode.com/ippclub/Dora-SSR/releases', target: '_blank' },
	]}/>

2. 运行软件，通过局域网内的 PC（平板或其他开发设备）的浏览器访问软件显示的服务器地址。
3. 开始游戏开发。

</TabItem>
<TabItem value="windows" label="Windows">

1. 下载并安装 Visual Studio 2022 的 X86 Visual C++ 可再发行组件包（即包含 MSVC 编译的程序所需运行时的 vc_redist.x86 补丁）。您可以从这里[下载](https://aka.ms/vc14/vc_redist.x86.exe)（更多详情请参阅[微软官网](https://learn.microsoft.com/zh-cn/cpp/windows/latest-supported-vc-redist?view=msvc-170)）。

2. 下载并运行软件。

	<Dropdown
		label="下载软件"
		items={[
			{ label: 'GitHub', to: 'https://github.com/ippclub/Dora-SSR/releases/latest', target: '_blank' },
			{ label: 'Gitee', to: 'https://gitee.com/ippclub/Dora-SSR/releases/latest', target: '_blank' },
			{ label: 'GitCode', to: 'https://gitcode.com/ippclub/Dora-SSR/releases', target: '_blank' },
	]}/>

3. 通过浏览器访问软件显示的服务器地址。
4. 开始游戏开发。

</TabItem>
<TabItem value="macos" label="macOS">

1. 下载并运行软件。

	<Dropdown
		label="下载软件"
		items={[
			{ label: 'GitHub', to: 'https://github.com/ippclub/Dora-SSR/releases/latest', target: '_blank' },
			{ label: 'Gitee', to: 'https://gitee.com/ippclub/Dora-SSR/releases/latest', target: '_blank' },
			{ label: 'GitCode', to: 'https://gitcode.com/ippclub/Dora-SSR/releases', target: '_blank' },
	]}/>

	或者您也可以通过 [Homebrew](https://brew.sh) 使用以下命令安装：
	```sh
	brew install --cask ippclub/tap/dora-ssr
	```
	后续更新请使用以下命令：
	```sh
	brew update
	brew upgrade dora-ssr
	# 或者也可以尝试下面的命令来更新同一版本下的 bug 修订版
	brew reinstall dora-ssr
	```

	首次运行软件时，您可能会看到“Dora 无法打开”的提示。请前往“系统偏好设置” > “安全性与隐私”并点击“仍要打开”。

2. 通过浏览器访问软件显示的服务器地址。
3. 开始游戏开发。

</TabItem>
<TabItem value="linux" label="Linux">

1. 安装软件：
	- Ubuntu
		```sh
		sudo add-apt-repository ppa:ippclub/dora-ssr
		sudo apt update
		sudo apt install dora-ssr
		```
	- Debian Bookworm
		```sh
		sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv-keys 9C7705BF
		sudo add-apt-repository -S "deb https://ppa.launchpadcontent.net/ippclub/dora-ssr/ubuntu jammy main"
		sudo apt update
		sudo apt install dora-ssr
		```
2. 运行软件，通过浏览器访问软件显示的服务器地址。
3. 开始游戏开发。

</TabItem>
</Tabs>

## 3. 编写游戏

1. 第一步：创建一个新项目

	- 在浏览器中，鼠标右键点击 Dora Dora 编辑器左侧资源树的“工作空间”菜单。
	- 点击菜单项 `新建`，选择新建文件夹，命名为 `Hello`。
	- 如果您在尝试使用凹语言开发游戏，也可以跳过文件夹的创建，直接创建一个新的凹语言游戏项目，通过在新建文件对话框中选择 `Wa` 语言，然后再勾选 “创建为 Wa 项目” 选项来新建为凹语言工程目录。

2. 第二步：编写游戏代码

	- 在项目文件夹下新建游戏入口代码文件，选择 Lua 语言（或 Teal、TypeScript、YueScript）命名为 `init`。
	- 如果您创建的是凹语言工程，可以直接复用 `main.wa` 文件作为游戏入口代码文件。
	- 编写代码：

<Tabs groupId="language-select">
<TabItem value="lua" label="Lua">

```lua title="Hello/init.lua"
-- 导入功能模块
local Sprite <const> = require("Sprite")
local Node <const> = require("Node")
local Move <const> = require("Move")
local Ease <const> = require("Ease")

-- 创建图片精灵
local sprite = Sprite("Image/logo.png")

-- 创建游戏场景树根节点
local root = Node()

-- 挂载图片精灵到游戏场景树根节点
root:addChild(sprite)

-- 接收并处理点击事件移动图片精灵
root:onTapBegan(function(touch)
	sprite:perform(
		Move(
			1, -- 持续时间，单位为秒
			sprite.position, -- 开始位置
			touch.location, -- 结束位置
			Ease.OutBack -- 缓动函数
		)
	)
end)
```

</TabItem>
<TabItem value="tl" label="Teal">

```teal title="Hello/init.tl"
-- 导入功能模块
local Sprite <const> = require("Sprite")
local Node <const> = require("Node")
local Move <const> = require("Move")
local Ease <const> = require("Ease")
local type Touch = require("Touch")

-- 创建游戏场景树根节点
local root = Node()

-- 创建图片精灵
local sprite = Sprite("Image/logo.png")

if not sprite is nil then
	-- 挂载图片精灵到游戏场景树根节点
	root:addChild(sprite)

	-- 接收并处理点击事件移动图片精灵
	root:onTapBegan(function(touch: Touch.Type)
		sprite:perform(
			Move(
				1, -- 持续时间，单位为秒
				sprite.position, -- 开始位置
				touch.location, -- 结束位置
				Ease.OutBack -- 缓动函数
			)
		)
	end)
end
```

</TabItem>
<TabItem value="ts" label="TypeScript">

```ts title="Hello/init.ts"
// 导入功能模块
import {Ease, Move, Node, Slot, Sprite} from 'Dora';

// 创建游戏场景树根节点
const root = Node();

// 创建图片精灵
const sprite = Sprite("Image/logo.png");

if (sprite) {
	// 挂载图片精灵到游戏场景树根节点
	root.addChild(sprite);

	// 接收并处理点击事件移动图片精灵
	root.onTapBegan(touch => {
		sprite.perform(
			Move(
				1, // 持续时间，单位为秒
				sprite.position, // 开始位置
				touch.location, // 结束位置
				Ease.OutBack // 缓动函数
			)
		);
	});
}
```

</TabItem>
<TabItem value="tsx" label="TSX">

```tsx title="Hello/init.tsx"
// @preview-file on
import {React, toNode, toAction, useRef} from 'DoraX';
import {Ease, Sprite, Touch} from 'Dora';

const sprite = useRef<Sprite.Type>();

// 点击事件处理函数
const onTapBegan = (touch: Touch.Type) => {
	const {current} = sprite;
	if (current) {
		const {x, y} = touch.location;
		current.perform(toAction(
			<move time={1}
				startX={current.x} startY={current.y}
				stopX={x} stopY={y}
				easing={Ease.OutBack}
			/>
		));
	}
};

// 创建游戏场景树根节点
// 以及一个图片精灵作为子节点
toNode(
	<node onTapBegan={onTapBegan}>
		<sprite ref={sprite} file='Image/logo.png'/>
	</node>
);
```

</TabItem>
<TabItem value="yue" label="YueScript">

```yue title="Hello/init.yue"
-- 导入功能模块
_ENV = Dora

-- 创建图片精灵
sprite = Sprite "Image/logo.png"

-- 创建游戏场景树根节点
with Node!

	-- 挂载图片精灵到游戏场景树根节点
	\addChild sprite

	-- 接收并处理点击事件移动图片精灵
	\onTapBegan (touch) ->
		sprite\perform Move(
			1 -- 持续时间，单位为秒
			sprite.position -- 开始位置
			touch.location -- 结束位置
			Ease.OutBack -- 缓动函数
		)
```

</TabItem>
<TabItem value="wa" label="Wa">

```go title="Hello/main.wa"
// 导入功能模块
import "dora"

func init {
	// 创建图片精灵
	sprite := dora.NewSpriteWithFile("Image/logo.png")

	// 创建游戏场景树根节点
	root := dora.NewNode()

	// 挂载图片精灵到游戏场景树根节点
	root.AddChild(sprite.Node)

	// 接收并处理点击事件移动图片精灵
	root.OnTapBegan(func(touch: dora.Touch) {
		sprite.PerformDef(dora.ActionDefMoveTo(
			1.0,                  // 持续时间，单位为秒
			sprite.GetPosition(), // 开始位置
			touch.GetLocation(),  // 结束位置
			dora.EaseOutBack,     // 缓动函数
		), false)
	})
}
```

</TabItem>
</Tabs>

3. 第三步：运行游戏

&emsp;&emsp;点击编辑器右下角 `🎮` 图标，然后点击菜单项 `运行`。或者按下组合键 `Ctrl + r`。

## 4. 发布游戏

1. 通过编辑器左侧游戏资源树，打开刚才新建的项目文件夹的右键菜单，点击 `下载` 选项。
2. 等待浏览器弹出已打包项目文件的下载提示。